import React, { Component } from "react";
import { Button, Steps, Space, Descriptions, Tabs, Modal, Spin } from "antd";
import { hospitalOrderInfoDetails, hospitalOrderConfirmVef, hospitalOrderCompelRefund } from '@/request/reservation';
import GoBack from "@/components/TheGoBack";
import TheImage from "@/components/TheImage";
import userAvatar from '@/assets/images/zhanwei_head.svg'
import "../style/style.less";
import _ from "lodash";
const { Step } = Steps;
const { TabPane } = Tabs
export default class ReservationDetails extends Component {
  constructor() {
    super();
    this.state = {
      stepData: [],
      // 完成进度
      stepData1: [
        {
          title: "待支付",
          subTitle: "",
        },
        {
          title: "待使用",
          subTitle: "",
        },
        {
          title: "已完成",
          subTitle: "",
        },
      ],
      stepData2: [
        {
          title: "待支付",
          subTitle: "",
        },
        {
          title: "待使用",
          subTitle: "",
        },
        {
          title: "已关闭",
          subTitle: "",
        },
      ],
      stepData3: [
        {
          title: "待支付",
          subTitle: "",
        },
        {
          title: "已关闭",
          subTitle: "",
        },
      ],
      current: '',
      tableData: [], //预约概况
      // tags数据
      tabData: [
        {
          key: "1",
          tab: '预约详情'
        },
        {
          key: "2",
          tab: '宠物信息'
        }
      ],
      orderData: [],// 订单明细
      reservationPeople: [], //预约人信息
      petInfo: [], //宠物信息
      allData: [],
      isModuleVisible: false, // 是否去核销
      hospitalOrderId: '',//
      petUserMobile: '', //客户联系电话
      doctorMobile: '', //医生联系电话
      orderState: '', //预约状态
      payWay: '', //支付方式
    }
  }
  componentDidMount() {
    this.setState({
      hospitalOrderId: this.props.match.params.id
    })
    this.getData()
  }
  // 订单详情
  getData = async () => {
    let res = await hospitalOrderInfoDetails({ id: this.props.match.params.id })
    if (res.code === 0) {
      const data = res.data
      // 支付方式
      let payWay = ''
      switch (data.payWay) {
        case 'WeChat':
          payWay = '微信'
          break;
        case 'Alipay':
          payWay = '支付宝'
          break;
        case 'UnionPay':
          payWay = "银联"
          break;
        case 'YsPay':
          payWay = "银行卡支付"
          break;
          case 'RemoteAlipay':
            payWay = "扫码支付（支付宝）"
            break;
        case 'RemoteWeChat':
          payWay = "扫码支付（微信）"
            break;
        default:
          payWay = "未知支付方式"
      }
      // 预约状态
      let orderState = '', current = 0, stepData = []
      switch (data.orderState) {
        case '1':
          orderState = '待支付';
          current = 0;
          stepData = this.state.stepData1
          break;
        case '2':
          orderState = '待使用';
          current = 1;
          stepData = this.state.stepData1
          break;
        case '9':
          orderState = '已完成'
          current = 2;
          stepData = this.state.stepData1
          break;
        case '0':
          orderState = '订单关闭'
          if (data.payState === '2') {
            current = 2;
            stepData = this.state.stepData2
          } else {
            stepData = this.state.stepData3
            current = 1;
          }
          break;
        default:
          break
      }
      // 预约概况
      let tableData = [
        {
          title: "预约编号",
          value: data.orderCode,
        },
        // {
        //   title: "预约人",
        //   value: data.petUserName,
        // },
        // {
        //   title: "预约人手机号",
        //   value: data.petUserMobile
        // },
        {
          title: "预约医生",
          value: data.doctorName
        },
        {
          title: "医生联系方式",
          value: data.doctorMobile
        },
        {
          title: "预约时间",
          value: data.appointmentTime,
        },
        {
          title: "预约状态",
          value: orderState,
        },
        {
          title: "订单金额(元)",
          value: <React.$Price price={data.orderPrice} color='red' symbol='' ></React.$Price>,
        },
      ]
      this.setState({
        tableData, // 预约概况
        current, // 完成进度
        stepData, // 完成进度
        allData: data,
        orderState: orderState, // 预约状态
        payWay: payWay, // 支付方式
        petUserMobile: data.memberMobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'), // 预约人电话
        doctorMobile: data.doctorMobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'), //医生电话
      })
    }

  }
  // 预约人电话
  petUserMobileChange = (e, v) => {
    this.setState({
      petUserMobile: e.indexOf('*') != -1 ? v : v.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    })
  }
  // 医生电话
  doctorMobileChange = (e, v) => {
    this.setState({
      doctorMobile: e.indexOf('*') != -1 ? v : v.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    })
  }
  //tab切换
  changeKey = (salesReturnStatus) => {
    this.setState({ salesReturnStatus })
  }
  // 退款
  refund = () => {
    React.$confirm({
      title: '您确认需要退款吗？',
      onOk: async () => {
        let res = await hospitalOrderCompelRefund({ id: this.state.hospitalOrderId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '退款成功'
          })
          this.getData()
        }
      }
    })
  }
  // 核销
  chargeOff = () => {
    this.setState({
      isModuleVisible: true,
    })
  }
  // 取消核销
  chargeOffCancel = () => {
    this.setState({
      isModuleVisible: false,
    })
  }
  // 确认核销
  chargeOffOk = async () => {
    let res = await hospitalOrderConfirmVef({ orderId: this.state.hospitalOrderId })
    if (res.code === 0) {
      React.$message({
        type: 'info',
        content: '核销成功'
      })
      this.getData()
    }
    this.setState({
      isModuleVisible: false,
    })
  }
  render() {
    const { current, tableData, petUserMobile, doctorMobile, orderState, payWay, tabData, detailsState, allData, isModuleVisible, stepData } = this.state;
    console.log(allData);
    return (
      <>
        <div className={"p-layout-box order-details"}>
          <GoBack history={this.props.history} title={"预约单详情"} />
          {/* <div className="printBtn">
            <div>
              <Button
                style={{ marginRight: 12 }}
                type="default"
                onClick={this.billSalePrint}
              >
                导出
              </Button>
              <Button type="default" onClick={this.WaybillPrint}>
                打印
              </Button>
            </div>
           </div> */}
          <div className={"p-layout-content"}>
            <div className={"order-details-content"}>
              <div className={"order-details-title"}>
                完成进度
              </div>
              <Steps current={current}>
                {_.map(stepData, (v, i) => {
                  return (
                    <Step
                      title={v.title}
                      description={
                        current === i ?
                          v.title === '待使用' ?
                            <Space>
                              <Button type="default" style={{ border: '1px solid #3d7fff' }} onClick={this.chargeOff}>核销</Button>
                              <Button type="default" danger onClick={this.refund}>退款</Button>
                            </Space>
                            : ''
                          : ''
                      }
                      subTitle={
                        <div>
                          {v.subTitle}
                        </div>
                      }
                    />
                  );
                })}
              </Steps>
              <div className="order-details-overview" >
                <Descriptions title="预约概况" bordered >
                  {
                    tableData.map((v) => {
                      return (
                        <Descriptions.Item
                          label={v.title}
                          contentStyle={v.title === '预约时间' ? { color: 'red' } : ''}
                          labelStyle={v.title === '订单金额(元)' ? { color: 'red', fontWeight: 600 } : { fontWeight: 600 }}
                        >
                          {v.value}
                        </Descriptions.Item>
                      );
                    })
                  }
                </Descriptions>
              </div>
              <div className="order-details-tabs">
                <Tabs activeKey={detailsState} onChange={(value) => this.changeKey(value)}>
                  {tabData.map(v => {
                    switch (v.key) {
                      case "1":
                        return (
                          <TabPane key={v.key} tab={v.tab}>
                            <div className="order-details-dataTitle">
                              <Descriptions title="订单明细" column={1} >
                                <Descriptions.Item
                                  label='订单编号' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {allData.orderCode}
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='下单时间' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {allData.createTime}
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='订单总价' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  <React.$Price price={allData.orderPrice}></React.$Price>
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='实际付款' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  <React.$Price price={allData.payPrice} color='orange' ></React.$Price>
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='支付方式' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {payWay}
                                </Descriptions.Item>
                                {
                                  allData.remark ?
                                    <Descriptions.Item
                                      label='订单备注' labelStyle={{ width: 100, alignItems: "center" }}
                                    >
                                      {allData.remark}
                                    </Descriptions.Item>
                                    : ''
                                }

                              </Descriptions>
                            </div>
                            <div className="order-details-dataTitle">
                              <Descriptions title="预约人信息" column={1} >
                                <Descriptions.Item
                                  label='客户头像' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  <TheImage width={50} height={50} style={{ borderRadius: '50%' }} src={allData.memberAvatar} />
                                </Descriptions.Item>
                                {/* <Descriptions.Item
                                  label='客户ID' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {allData.memberId}
                                </Descriptions.Item> */}
                                <Descriptions.Item
                                  label='客户昵称' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {allData.nickName}
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='手机号' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  <span style={{ display: 'flex', }}>
                                    <span>{petUserMobile}</span>
                                    <Button size="small" type="link" onClick={() => this.petUserMobileChange(petUserMobile, allData.memberMobile)}>
                                      联系客户
                                    </Button>
                                  </span>
                                </Descriptions.Item>
                              </Descriptions>
                            </div>
                            <div className="order-details-dataTitle">
                              <Descriptions title="医生信息" column={1} >
                                <Descriptions.Item
                                  label='医生头像' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  <TheImage width={50} height={50} style={{ borderRadius: '50%' }} src={allData.doctorHeadPortrait ? allData.doctorHeadPortrait : userAvatar} />
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='预约医生' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {allData.doctorName}
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='医生联系方式' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  <span style={{ display: 'flex', }}>
                                    <span>{doctorMobile}</span>
                                    <Button size="small" type="link" onClick={() => this.doctorMobileChange(doctorMobile, allData.doctorMobile)}>
                                      联系医生
                                    </Button>
                                  </span>
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='医生单价' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  <React.$price price={allData.doctorPrice} />
                                </Descriptions.Item>
                              </Descriptions>
                            </div>
                            <div className="order-details-dataTitle">
                              <Descriptions title="预约信息" column={1} >
                                <Descriptions.Item
                                  label='预约时间' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {allData.appointmentTime}
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='预约门店' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {allData.storeName}
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='门店联系方式' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {allData.storeMobile}
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='门店地址' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {allData.addressDetail}
                                </Descriptions.Item>
                                <Descriptions.Item
                                  label='预约状态' labelStyle={{ width: 100, alignItems: "center" }}
                                >
                                  {orderState}
                                </Descriptions.Item>
                              </Descriptions>
                            </div>
                          </TabPane>
                        )
                        break;
                      case "2":
                        return <TabPane key={v.key} tab={v.tab}>
                          <div className="order-details-dataTitle">
                            <Descriptions title="宠物信息" column={1} >
                              <Descriptions.Item
                                label='宠物头像' labelStyle={{ width: 100, alignItems: "center" }}
                              >
                                <TheImage width={50} height={50} style={{ borderRadius: '50%' }} src={allData.petCardShowImages ? allData.petCardShowImages : userAvatar} />
                              </Descriptions.Item>
                              <Descriptions.Item
                                label='宠物ID' labelStyle={{ width: 100, alignItems: "center" }}
                              >
                                {allData.petArchivesId}
                              </Descriptions.Item>
                              <Descriptions.Item
                                label='昵称' labelStyle={{ width: 100, alignItems: "center" }}
                              >
                                {allData.petName}
                              </Descriptions.Item>
                              <Descriptions.Item
                                label='品种' labelStyle={{ width: 100, alignItems: "center" }}
                              >
                                {allData.petVarieties}
                              </Descriptions.Item>
                              <Descriptions.Item
                                label='生日' labelStyle={{ width: 100, alignItems: "center" }}
                              >
                                {allData.birthday}
                              </Descriptions.Item>
                              <Descriptions.Item
                                label='身份ID' labelStyle={{ width: 100, alignItems: "center" }}
                              >
                                {allData.petIdCard}
                              </Descriptions.Item>
                            </Descriptions>
                          </div>
                        </TabPane>
                        break;
                      default:
                        break;
                    }
                  })}
                </Tabs>
              </div>
            </div>
            <Modal
              title={'确认核销'}
              visible={isModuleVisible}
              onOk={this.chargeOffOk}
              onCancel={this.chargeOffCancel}
            >
              预约订单核销，订单状态将从【待使用】变更成已完成
            </Modal>
          </div>
        </div>
      </>
    )
  }
}
